<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title><?php echo $title;?></title>
	<link rel="stylesheet" href="/css/QapTcha.jquery.css" type="text/css" />
	<link rel="stylesheet" type="text/css" href="/css/main.css" media="screen">
	<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="/js/browser.js"></script>
	<script src="/js/artDialog.js"></script>
	<script src="/js/artDialog/artDialog.js?skin=opera"></script>


	<script type="text/javascript" src="/js/jquery-ui.js"></script>
	<script type="text/javascript" src="/js/jquery.ui.touch.js"></script>
	<script type="text/javascript" src="/js/QapTcha.jquery.js"></script>
	<style>
		.waveWrapper {
			overflow: hidden;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;
			width: 100%;
			height: 100%;
			background-image: url('/images/bg.jpg');
			background-repeat:no-repeat;
			background-size:100% 100%;
			-moz-background-size:100% 100%;
		}
		.cloud {
			width: 200px; height: 60px;
			background: #fff;
			border-radius: 200px;
			-moz-border-radius: 200px;
			-webkit-border-radius: 200px;
			z-index:9998;
			position: relative;
		}
		.cloud:before, .cloud:after {
			content: '';
			position: absolute;
			background: #fff;
			width: 100px; height: 80px;
			position: absolute; top: -15px; left: 10px;
			border-radius: 100px;
			-moz-border-radius: 100px;
			-webkit-border-radius: 100px;
			-webkit-transform: rotate(30deg);
			transform: rotate(30deg);
			-moz-transform: rotate(30deg);
		}
		.cloud:after {
			width: 120px; height: 120px;
			top: -55px; left: auto; right: 15px;
		}
		.x1 {
			left: 500px;
			-webkit-transform: scale(0.6);
			-moz-transform: scale(0.6);
			transform: scale(0.6);
			opacity: 0.9;
			-webkit-animation: moveclouds 30s linear infinite;
			-moz-animation: moveclouds 30s linear infinite;
			-o-animation: moveclouds 30s linear infinite;
		}
		.x2 {
			left: 200px;
			-webkit-transform: scale(0.3);
			-moz-transform: scale(0.3);
			transform: scale(0.3);
			opacity: 0.6; /*opacity proportional to the size*/
			-webkit-animation: moveclouds 65s linear infinite;
			-moz-animation: moveclouds 65s linear infinite;
			-o-animation: moveclouds 65s linear infinite;
		}
		.x3 {
			left: 650px;
			-webkit-transform: scale(0.8);
			-moz-transform: scale(0.8);
			transform: scale(0.8);
			opacity: 0.8; /*opacity proportional to the size*/
			-webkit-animation: moveclouds 85s linear infinite;
			-moz-animation: moveclouds 85s linear infinite;
			-o-animation: moveclouds 85s linear infinite;
		}
		.x4 {
			left: -240px;
			-webkit-transform: scale(0.5);
			-moz-transform: scale(0.5);
			transform: scale(0.5);
			opacity: 0.5; /*opacity proportional to the size*/
			-webkit-animation: moveclouds 45s linear infinite;
			-moz-animation: moveclouds 45s linear infinite;
			-o-animation: moveclouds 45s linear infinite;
		}
		.x5 {
			left: -400px;
			-webkit-transform: scale(0.4);
			-moz-transform: scale(0.4);
			transform: scale(0.4);
			opacity: 0.4; /*opacity proportional to the size*/
			-webkit-animation: moveclouds 30s linear infinite;
			-moz-animation: moveclouds 30s linear infinite;
			-o-animation: moveclouds 30s linear infinite;
		}

		@-webkit-keyframes moveclouds {
			0% {margin-left: 1000px;}
			100% {margin-left: -1000px;}
		}
		@-moz-keyframes moveclouds {
			0% {margin-left: 1000px;}
			100% {margin-left: -1000px;}
		}
		@-o-keyframes moveclouds {
			0% {margin-left: 1000px;}
			100% {margin-left: -1000px;}
		}
	</style>
</head>
<body>
	<div class="waveWrapper">
		<div class="cloud x5"></div>
		<div class="cloud x2"></div>
		<div class="cloud x1"></div>
		<div class="cloud x4"></div>
		<div class="cloud x3"></div>
	</div>

	<div class="login">
		<h1><?php echo $title;?></h1>
		<form>
		<div class="form-send clearfix">
			<p class="bot">
				<label style="display: block;" for="user">用户</label>
				<input class="text" name="user-name" id="user" autocomplete="off" required="required" type="text">
			</p>
			<p>
				<label style="display: block;" for="pass">密码</label>
				<input class="text" name="user-pass" id="pass" autocomplete="off" required="required" type="password">
			</p>
		</div>
		<div class="clr"></div>
		<div class="QapTcha"></div>
		<div class="clr"></div>
		<input name="send" class="submit" value="划动解锁" type="button" style="background-color:#A0A0A0; display:none;">
		</form>
	</div>

	<div class="footer">
		<p>Copyleft © 2019 <?php echo $title;?></p>
	</div>

<script type="text/javascript">
$('.QapTcha').QapTcha({disabledSubmit:true,autoRevert:true,autoSubmit:true});

$('.loading').fadeOut();
$('.form-send input').focus(function(){
	if ( $(this).val() == '' ){
		$(this).prev('label').fadeOut();
	}
});
$('.form-send input').blur(function(){
	if ( $(this).val() == '' ){
		$(this).prev('label').fadeIn();
	}
});

$('#bg').children('img').attr('src', '/images/bg.jpg').load(function(){
	resizeImage('bg');
	$(window).bind("resize", function() { resizeImage('bg'); });
});

function resizeImage( id ){
	$('#'+id).css({
		'position':'absolute',
		'top':'0px',
		'left':'0px',
		'width':'100%',
		'height':'100%',
		'z-index': -1,
		'overflow':'hidden'
	});

	var w = $(window).width(),
		h = $(window).height(),
		o = $('#'+id).children('img'),
		iW = o.width(),
		iH = o.height();

	o.css({ 'display':'block', 'opacity':0 });

	//首先判断窗口的大小比例
	if ( w > h ){

		//判断图片大小比例
		if ( iW > iH ){

			//当图片宽度大于图片高度的时候 设置图片宽为窗口的宽度
			o.css({ 'width': w });

			//则图片的高度 等于 (当前图片的高度 / 当前图片的高度) * 当前窗口的宽度
			//这个比例怎么算的，就拿屏幕分辨率来说吧。 1024 * 768 的分辨率
			//当我已知 1024 宽的时候，我要求出 768 怎么求呢，则这相当于高 = 比例 ( 768 / 1024 ) * 1024
			//这里的图片高度就相当于，我当前的图片的  比例( 图片的高度 / 图片的宽度 ) * 窗口的宽度 其实也就是图片的宽度，因为我们这里把图片的宽度设置成和窗口一样宽了
			o.css({ 'height': Math.round( (iH / iW)*w ) })

			var newIh = Math.round( (iH / iW)*w );
			//这里还要判断算出来的 新图片高度 如果没有当前窗口高度高还要处理 原理和上面一样，
			//因为没有当前窗口高，则我们用图片高的比例来控制宽度  公示要是晕的，就用分辨率的例子 就好理解了

			//console.log( newIh );

			if ( newIh < h ){
				o.css({ 'height' : h });
				o.css({ 'width' : Math.round( ( iW / iH )*h ) });
			}

		} else {
			//其实这里跟上面的新高度判断是一样的，因为图片宽度没有高度大
			o.css({ 'height' : h });
			o.css({ 'width' : Math.round( ( iW / iH )*h ) });
		}

	} else {
		//这里也是一样，窗口的宽高没有高度大。则设置宽度，高度等于窗口的高度
		o.css({ 'height' : h });
		o.css({ 'width' : Math.round( ( iW / iH )*h ) });
	}

	//这里将图片以中间显示 需要重新获取设置过的图片的 宽度和高度 然后将其于游览器宽高 对比
	//如果还是大于窗口的宽或者高，则将其设置负边距来将设置成中间显示
	var newIW = o.width(),
		newIH = o.height();

	//console.log( newIW, newIH );

	if ( newIW > w ){
		var l = ( newIW - w ) / 2;
		o.css( 'margin-left', -l );
	} else {
		o.css( 'margin-left', 0 );
	}

	if ( newIH > h ){
		var t = ( newIH - h ) / 2;
		o.css( 'margin-top', -t );
	} else {
		o.css( 'margin-top', 0 );
	}

	o.css({'opacity':'1'});
}

$(function(){
	$('.submit').click(function(){
		var username	=	$("input[name='user-name']").val();
		var userpass	=	$("input[name='user-pass']").val();
		if( username=='' || userpass=='' ){
			dialog = art.dialog({
								lock: true,
								icon: 'warning',
								content: '用户名密码不能为空.'
							},'ok');
			return false;
		}
		$('.submit').attr('disabled','disabled');
		$.post('/public/checklogin', {'username':username,'password':userpass}, function(data){
			switch(data.code){
				case '200':
			        window.location.href = '/admin';
					break;
				case '100':
			    case '300':
				case '400':
				case '500':
				case '600':
				case '700':
				case '800':
					dialog = art.dialog({
								lock: true,
								icon: 'error',
								content: data.message
							},'ok');
					break;
			}
			$('.submit').removeAttr('disabled');
		}, 'json');
	})
})
function fleshVerify(name){ //重载验证码
	var timenow = new Date().getTime();
	$("#"+name).attr("src", '/public/yzcode?'+timenow);
}
</script>

</body></html>
